import Draw from '../../base/compose/draw'
import Com from '../../base/com'
import { On } from '@/psoon/ext/decorators'
import mmpx from '@/psoon/pub/px2mm'
import Tpl from './template.hbs'
import PrintBlock from '../printBlock/printBlock'
import './style.scss'

class PrintBar extends Com.extend(Draw){
  _printType = 'text'
  _moveBlock = null
  constructor( type = 'text' ){
    super(Tpl)
    this._printType = type
  }

  cloneEl(){
    return $(this.template)
  }

  @On('drag-mousemove')
  dragMousemove( ed ){
    const e = ed.e    
    this._moveBlock = ed.block || this.createMoveEl()
    ed && (ed.block = this._moveBlock || this.createMoveEl())
    ed.block.el.style.position ='fixed'
    ed.block.el.style.left = mmpx.getNumber(e.pageX, 'px') + 'px'
    ed.block.el.style.top =  mmpx.getNumber(e.pageY, 'px') + 'px'
  }
  
  @On('drag-mouseup')
  dragMouseup( ed ){
    this._moveBlock = null
  }

  createMoveEl(){
    const printBlock = new PrintBlock( this._printType )
    printBlock.appendBody()
    return printBlock
  }
}

export default PrintBar